<template>
    <!-- 应用角色授权 -->
    <div class="w-100 h-100 mb-4">
        <el-transfer
            class="transfer"
            :data="roles"
            :props="{ label: 'name', key: 'id' }"
            :titles="['角色', '已分配角色']"
            v-model="checkedRoles"
            @change="save"
        ></el-transfer>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";

const roles = ref([]);
const checkedRoles = ref([]);
const { appId } = defineProps({
    appId: String,
});

onMounted(() => {
    app.https.post("/sys/role/query").then((resp) => {
        roles.value = resp;
    });

    app.https.post("/sys/role-app/query", { appId }).then((resp) => {
        checkedRoles.value = resp.map((item) => item.roleId);
    });
});

function save() {
    app.https
        .post("/sys/role-app/save-app-roles", {
            appId,
            roleIds: checkedRoles.value,
        })
        .then(() => {
            app.success("操作成功");
        });
}
</script>

<style lang="scss" scoped>
.transfer {
    height: calc(100% - 0px);

    :deep() {
        .el-transfer-panel {
            width: 360px;
            height: 100%;

            .el-transfer-panel__body {
                height: calc(100% - 50px);
            }
        }
    }
}
</style>
